<template>
  <div class="noTable">
    <mu-form :model="data" class="mu-lan-form" :label-position="'left'" label-width="">
      <mu-form-item label="检查结果" class="form-between lan-mu-radio required">
        <mu-radio v-model="data.checkResult" value="1" label="有问题" :disabled="!projectData.length"></mu-radio>
        <mu-radio v-model="data.checkResult" value="0" label="无问题" :disabled="!projectData.length"></mu-radio>
      </mu-form-item>
      <mu-form-item label="现场照片" class="inline-item required" style="padding-bottom:0.15rem;" v-if="data.checkResult==0">
        <div v-for="(item,index) in data.scenePhotos" :key="index" class="img-box">
          <img :src="item" :preview="index" />
          <mu-icon class="close" value="close" @click="deleteImg(index)"></mu-icon>
        </div>
        <FileUpload @successed="imgSuccess" v-if="data.scenePhotos.length < 5"></FileUpload>
      </mu-form-item>
      <!-- 问题列表 -->
      <div v-if="data.checkResult==1">
        <div class="hasQuesBox" v-for="(item,index) in data.problemList" :key="index">
          <questionFrom :index="index+''" @add="qAdd" @plus="qPlus" :len="data.problemList.length+''"
                        :areaInfor="areaInfor" :projectData="projectData"
                        v-model="data.problemList[index]"></questionFrom>
        </div>
      </div>
      <mu-form-item label="抄送人" class="form-between required" v-if="data.checkResult==0">
        <span class="normal-font-size form-right-text" @click="getCopyUser">{{copyuserlist?copyuserlist:'请选择'}}</span>
        <i class="iconfont angle-left iconangle-right"></i>
      </mu-form-item>
    </mu-form>
    <!-- 选择抄送人 -->
    <!-- 选人 -->
    <User ref="User" v-if="userOpen" :multiple="true" :open="userOpen" :orgType="userType" :customRoot="userCustomRoot"
          @change="userChange" @close="userOpen = false"></User>
  </div>
</template>

<script>
  import FileUpload from "@/fileUpload/FileUpload.vue"
  import User from "@/select/user/User";
  import questionFrom from "./questionFrom"

  export default {
    name: 'noTable',
    components: {
      FileUpload, questionFrom, User
    },
    props: {

      projectData: {//项目信息
        type: Array,
        default: () => []
      },
      areaDetail: {//区域信息
        type: Object,
        default: () => {
        }
      },
      data: {//区域信息
        type: Object,
        default: () => {
        }
      },
    },
    model: {
      prop: "data",
    },
    data() {
      return {
        form: {
          checkResult: '0',//检查结果 0无问题 1有问题
          scenePhotos: [],//现场照片
          checkCopyUserIds: '',//抄送人
          problemList: [{
            "problemTypeId": "", //--问题类型id
            "problemElseRemark": "string", //--问题类型选则其它时候的备注
            "problemLevel": 0, //--问题等级 1一般 2较大 3重大
            "scenePhotos": "string", ////--现场照片 格式['1','2']
            "floorPlanTag": "string", //--平面图标记
            "problemDescription": "string", //--问题描述
            "rectifyDto": {
              "days": 0, //--整改天数 0立即整改
              "endTime": "2019-12-14T06:55:15.580Z", //--整改期限
              "responsibleUnitId": "string", //--整改单位 -- 责任单位
              "responsibleUserId": "string", //--整改人
              "rectificationRequirements": "string", //--整改要求
              "reviewUser": "string",// --复查人
              "isCurrentRect": 0,// --问题必传参数 是否现场整改 0是 1否
              "rectCopyUserIds": [ ///--整改抄送人
                "string"
              ],
            }
          }],
        },
        proUrl: this.$A.baseUrl[0] + "/safety/system/download?fileUrl=",
        imgList: [],
        questionList: [{}],
        userOpen: false,
        userType: 'currOrgProject',
        userCustomRoot: [],
        areaInfor: {},
        copyuserlist: ''
      }
    },
    computed: {},
    created() {
      console.log(this.areaDetail)
      this.userCustomRoot = this.projectData
      this.areaInfor = this.areaDetail
    },
    mounted() {
    },
    watch: {
      areaDetail: {
        handler(newVal, oldVal) {
          this.areaInfor = newVal
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      deleteImg(index) {
        this.data.scenePhotos.splice(index, 1)
      },
      imgSuccess(list) {
        if (list.code == 200) {
          this.data.scenePhotos.push(this.proUrl + list.body)
        }
      },
      userChange(value) {
        console.log(value)
        this.data.checkCopyUserIds = value.map(o => o.id)
        this.copyuserlist = value.map(o => o.employeeName).join(',')
        this.userOpen = false;
      },
      getCopyUser() {
        this.userOpen = true
      },
      qAdd() {
        this.$emit('add')
      },
      qPlus(index) {
        this.$emit('plus', index)
      },


      //获取质量检查表列表
      async getAllTable() {
        this.$openLoading();
        let obj = {
          "orgId": this.$A.GS('orgInfo')['orgId'],
          "type": this.$A.GS('orgInfo')['type'],
          "current": -1,
          "size": 0,
          "status":'0',
        };
        this.$A.Go('get', '/safety/checkTable/pageList', obj).then(async success => {
          if (success.code == 200) {
            let data = success.body.rows;
            for (let i = 0; i < data.length; i++) {
              data[i]['detailInfo'] = await this.getDetail(data[i]['id'])
            }

            this.allTableData = data
            this.$closeLoading();
          } else {
            this.allTableData = [];
            this.$closeLoading();
          }

        }, function (err) {
          console.log(err)
          this.$closeLoading();
        })
      },
      async getDetail(id) {
        let obj = {id}
        return this.$A.Go('get', '/safety/checkTable/detail', obj).then(function (success) {
          if (success.code == 200) {
            return success.body
          } else {
            return null
          }
        }, function (err) {
          console.log(err)
          return null
        })
      },
      okSelect() {
        // console.log(this.checkboxSelected)
        let data = [];
        for (let i = 0; i < this.allTableData.length; i++) {
          if (this.checkboxSelected.includes(this.allTableData[i]['id'])) {
            data.push(this.allTableData[i])
          }
        }
        this.$emit('ok', data)
      },
    },
    destroyed() {
    }
  }
</script>

<style lang="scss" scoped>
  .img-box {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0.1rem;
    position: relative;
    img {
      height: 100%;
      width: 100%;
    }
    .close {
      position: absolute;
      height: 0.2rem;
      width: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.15rem;
      top: 0.04rem;
      right: 0.04rem;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      background-color: #FF4242;
    }
  }

  .hasQuesBox {
    width: 100%;
  }
</style>
